<template>
    <view class="activity">
        <u-sticky bgColor="#fff">
            <u-tabs :list="tabsList" lineColor="#966BFF" :current="state.current" @change="changeTabs"></u-tabs>
        </u-sticky>
        <block v-if="state.current === 0">
            <SwipAction :swipeData="swipeData"></SwipAction>
        </block>
        <block v-if="state.current === 1">
            <SwipAction :swipeData="swipeData2"></SwipAction>
        </block>
    </view>
</template>

<script lang="ts" setup >
import { ref } from 'vue';
import SwipAction from '../components/SwipeAction/index.vue';
const tabsList = ([
    { name: '发起的' },
    { name: '参加的' }
]);
const swipeData = ([
    { name: '剧本杀', time: '2023/9/14周四 19:00', address: '浙江省杭州市拱墅区申花路运河财富中心9幢', state: 0 },
    { name: '剧本杀', time: '2023/9/14周四 19:00', address: '浙江省杭州市拱墅区申花路运河财富中心9幢', state: 1 },
    { name: '剧本杀', time: '2023/9/14周四 19:00', address: '浙江省杭州市拱墅区申花路运河财富中心9幢', state: 2 }
]);
const swipeData2 = ([
    { name: '剧本杀', time: '2023/9/14周四 19:00', address: '浙江省杭州市拱墅区申花路运河财富中心9幢', state: 0 },
    { name: '剧本杀', time: '2023/9/14周四 19:00', address: '浙江省杭州市拱墅区申花路运河财富中心9幢', state: 1 },
    { name: '剧本杀', time: '2023/9/14周四 19:00', address: '浙江省杭州市拱墅区申花路运河财富中心9幢', state: 0 },
    { name: '剧本杀', time: '2023/9/14周四 19:00', address: '浙江省杭州市拱墅区申花路运河财富中心9幢', state: 2 }
]);
const state = ref({
    current: 0
})
const changeTabs = ({ index }: { index: number }) => {
    state.value.current = index;
}
</script>

<style lang="scss" scoped>
.activity {
    .swipeItem {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 0 10rpx;
        margin: 20rpx 0;
        .image {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-left: 15rpx;
            .activityState{
                position: relative;
                top: 43rpx;
                right: 58rpx;
                font-size: 17rpx;
                padding: 7rpx;
                background-color: #75777B;
                border-radius: 10rpx 0 10rpx 0 ;
                color: #EBECF0;
            }
            .unStartBg{
                background-color: #976CFE;
            }
            .startingBg{
                background-color: #F55773;
            }
            .overBg{
                background-color: #75777B;
            }
        }

        .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: -30rpx;
            .title{
                font-size: 35rpx;
                margin: 5rpx 0;
            }
            .time{
                margin-bottom: 4rpx;
            }
            .time,
            .address {
                font-size: 22rpx;
                color: #B0B0B0;
            }
        }
    }
}</style>